<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" :empty-view-center="false" :hide-no-more-by-limit="10">
		<!-- <template v-slot:top>
			<view class="searchBox">
				<uni-search-bar placeholder="搜索？？？" @input="(e) => queryList(null, null, e)"></uni-search-bar>
			</view>
		</template> -->
		<!-- <movable-area> -->
		<view class="box">
			<!-- 关注的行业 搜索 -->
			<view
				:class="['container', index + 1 != dataList.length && 'conLines']"
				v-for="(item, index) in dataList"
				:key="index"
				@click="navTo(`/pages/logisticsCompany/myDeclaration/freightDetails/freightDetails`, { item })"
			>
				<view class="shopType">
					<text class="circle">{{ index + 1 }}</text>
					<text>车号:{{ item.vehicleNo }}</text>

					<view class="freightDetails">
						<u-icon color="#51a9ec" label-color="#51a9ec" label-size="26" label="运费详情" size="20" name="arrow-right" label-pos="left"></u-icon>
					</view>
				</view>
				<view class="con">
					<view class="item">
						<text class="type">装车日期:</text>
						<text>{{ item.loadingTime }}</text>
					</view>
					<view class="item">
						<text class="type">运费单价:</text>
						<text>
							{{ item.freightPrice / 1000 }}
							<text class="unit">元</text>
						</text>
					</view>
					<view class="item">
						<text class="type">车辆状态:</text>
						<text v-if="item.freightState == 1">未到厂</text>
						<text v-if="item.freightState == 2">已到厂</text>
						<text v-if="item.freightState == 3">已装车</text>
						<text v-if="item.freightState == 4">已卸车</text>
					</view>
					<view class="item">
						<text class="type">运费状态:</text>
						<text v-if="item.freightState == 1">未审核</text>
						<text v-if="item.freightState == 2">已审核</text>
						<text v-if="item.freightState == 3">已付款</text>
					</view>
					<view class="item">
						<text class="type">装车地点:</text>
						<view class="rightBox">
							<text class="text">{{ item.loadingAddress }}</text>
							<image class="img" src="/static/area.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="item">
						<text class="type">卸车地点:</text>
						<view class="rightBox">
							<text class="text">{{ item.unloadAddress }}</text>
							<image class="img" src="/static/area.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import http from '@/common/request.js';
import { onLoad, onUnload, onShow, onHide, onReady } from '@dcloudio/uni-app';
import { navTo } from '@/common/utils';
import { getReportCar } from '../../../../api/logisitcsCompany';

const dataList = ref([]);
const paging = ref(null);
const cache = {};

const queryList = (pageNumber, pageSize, filterText) => {
	if (pageNumber) {
		cache.pageNumber = pageNumber;
		cache.pageSize = pageSize;
	} else {
		cache.filterText = filterText;
	}
	getReportCar(cache).then((res) => {
		paging.value.complete(res.data.rows);
	});
};
</script>

<style scoped lang="scss">
.conLines {
	border-bottom: 6rpx solid #f8f8f8;
}

.searchBox {
	padding: 10rpx;
	// border: 1rpx solid red;
}

.container {
	padding: 20rpx 30rpx;

	.shopType {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 0;

		.freightDetails {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-right: 30rpx;
				transform: rotateY(180deg);
			}
		}

		.circle {
			margin-right: 10rpx;
			font-size: 24rpx;
			display: flex;
			width: 40rpx;
			height: 40rpx;
			background-color: #51a9ec;
			justify-content: center;
			align-items: center;
			border-radius: 50%;
			color: #fff;
		}
	}

	.con {
		display: flex;
		flex-direction: column;
		// border: 1rpx solid red;
		background-color: #fff;

		.conRow {
			display: flex;
		}

		.item {
			flex: 1;
			padding: 10rpx 0;
			// border: 1px solid red;
			display: flex;
			justify-content: space-between;

			.type {
				color: #bdbdbd;
				font-size: 26rpx;
			}

			.unit {
				font-size: 23rpx;
			}

			.rightBox {
				display: flex;
				align-items: center;

				.text {
					font-weight: 500;
					font-size: 26rpx;
					width: 500rpx;
					text-align: right;
				}

				.img {
					width: 35rpx;
					height: 35rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
}
</style>
